<template>
  <view class="body">
    <view class="title">
      <text class="title_text">{{ chartInfo.title }}变化情况</text>
    </view>
    <view v-if="chartInfo.unit" class="unit">
      {{ chartInfo.unit }}
    </view>
    <view>
      <view class="echart">
        <qiun-data-charts
          :canvas2d="true"
          :canvasId="chartInfo.value"
          type="line"
          :opts="opts"
          :chartData="chartData"
        />
      </view>
    </view>
    <view class="xtitle">
      <text v-for="(item, index) of xTitles" :key="index" class="xtext">{{ item }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import qiunDataCharts from '@/module/common/qiun-data-charts/qiun-data-charts.vue'
import { ref, onMounted, watch } from 'vue'
import { signsInfoPage } from '@/api/body'
import { formatDate } from '@/utils/util'
import { deepCopy } from '@/utils/tools'

let chart = ref()
const tab = ref('')
const xTitles = ref([])

const props = defineProps({
  empi: String,
  chartInfo: {
    type: Object,
    default: () => {}
  }
})

const opts = {
  color: [props.chartInfo.color],
  padding: [20, 30, 10, 0],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true,
    disabled: true
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    splitNumber: props.chartInfo.splitNumber,
    data: [
      {
        min: props.chartInfo.min,
        max: props.chartInfo.max
      }
    ]
  },
  extra: {
    line: {
      type: 'straight',
      width: 2,
      activeType: 'hollow'
    },
    markLine: props.chartInfo.markLine
  }
}

const chartData = ref()
const chart_data = ref()

watch(
  () => chart_data.value,
  (n, o) => {
    if (!o || JSON.stringify(n) !== JSON.stringify(o)) {
      chartData.value = deepCopy(n)
    }
  }
)

onMounted(() => {
  getData(props.chartInfo.value, props.chartInfo.title)
})

const getData = (item: string, name: string) => {
  let params = {
    page: 1,
    limit: 5,
    empi: props.empi, // props.empi
    itemList: [item]
  }
  signsInfoPage(params).then((res) => {
    const categories = []
    const series = []
    const data = []
    if (res.data && res.data.list.length > 0) {
      res.data.list.map((v) => {
        if (props.chartInfo.value !== 'whr') {
          v[item] = v[item].toFixed(1)
        }
        data.unshift(v[item])
        categories.unshift(formatDate(v.collectTime, 'MM-dd'))
        xTitles.value.unshift(formatDate(v.collectTime, 'MM-dd\nhh:mm'))
      })
    }
    if (res.data.list.length == 0) {
      for (var i = 0; i < 5; i++) {
        categories.unshift('')
      }
    }
    series.push({
      name: name,
      data: data
    })
    chart_data.value = {
      categories: categories,
      series: series
    }
  })
}
</script>

<style lang="scss" scoped>
.body {
  padding: 32rpx;
  margin-bottom: 32rpx;
  background: #ffffff;
  border-radius: 12rpx;
  .echart {
    width: 100%;
    height: 360rpx !important;
  }
  .title {
    height: 62rpx;
    display: flex;
    align-items: flex-start;
    gap: 16rpx;
    border-bottom: 1px solid #e5e6eb;
    .img_logo {
      width: 32rpx;
      height: 32rpx;
      transform: translateY(6rpx);
    }
    .title_text {
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
    }
  }
  .unit {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    margin: 20rpx 0;
  }
  .xtitle {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-left: 50rpx;
    .xtext {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }
  }
}
</style>
